<template>
	<div class="base-info">
		<div class="base-info-content">
			<p>{{getBaseMsg.title}}</p>
		</div>
		<ul class="base-info-features clearfix">
			<li class="recommend"><img src="../../assets/img/Recommend@3x.png"></li>
			<li v-for="(item,index) in getBaseMsg.features">{{item}}</li>
		</ul>
		<ul class="base-info-more clearfix">
			<li><img src="../../assets/img/Serviceguarantee@3x.png"></li>
			<li>{{getBaseMsg.retreat}}</li>
			<li><img src="../../assets/img/Serviceguarantee@3x.png"></li>
			<li>{{getBaseMsg.timeConfirm}}</li>
			<li></li>
			<li class="sold service-guarantee-sold">{{getBaseMsg.soldOut}}</li>	
			<li class="sold"><img src="../../assets/img/Serviceguaranteesold@3x.png"></li>
		</ul>
	</div>
</template>

<script type="text/ecmascript-6">
	import {mapGetters} from 'vuex'
	export default{
		name: 'baseInfo',
		computed: {
	  	...mapGetters([
	      'getBaseMsg'
	    ])
	  }
	}
</script>

<style scoped lang="scss">
	$verticalDistance: 1rem;
	$horizontalDistance: 1.63rem;
	.base-info{
		background: #FFF;
	}
	.base-info-content{
		font: {
			family: ".PingFang-SC-Semibold";
			size: 1.55rem; 
			weight: 600;
		}
		color: #333;
		line-height: 2.27rem; /*25px*/
		padding: $verticalDistance $horizontalDistance; /*15px*/
	}
	.base-info-features{
		padding-bottom: $verticalDistance;
		margin-left: $horizontalDistance;
		border-bottom: 1px solid #E1E1E1;
		li{
			float: left;
			margin-right: 5px;
			font: {
				family: ".PingFang-SC-Regular";
				size: 1.4rem; 
			}
			line-height: 1.8rem;
			color: #666;
			letter-spacing: 0;
			padding: 1px 3px;
			border-radius: 3px;
			&:nth-child(2){
				margin-left: -3px;
			}
		}
		li:not(.recommend){
			border: 1px solid #ccc;
		}
	}
	.base-info-more{
		border-bottom: 1px solid #E1E1E1;
		padding: $verticalDistance $horizontalDistance .7rem $horizontalDistance;
		li{
			font-family: ".PingFang-SC-Regular";
			font-size: 1.18rem;
			line-height: 1.8rem;
			color: #6CC37B;
			letter-spacing: 0;
		}
		li:not(.sold){
			float: left;
		}
		li:nth-child(2n+1){
			margin-right: .5rem;
		}
		li:nth-child(2n){
			margin-right: 1rem;
		}
		.sold{
			float: right;
			color: #999;
		}
		.service-guarantee-sold{
			margin-right: 0 !important;
		}
	}
</style>